document.getElementById('upload-button').addEventListener('click', () => {
    document.getElementById('image-input').click();
});

let img;
document.getElementById('image-input').addEventListener('change', function() {
    const file = this.files[0];
    if (!file.type.startsWith('image/')) {
        alert('请上传一个图片文件！');
        return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
        img = new Image();
        img.onload = () => {
            updateCanvas();
        };
        img.src = e.target.result;
        document.querySelector('.settings-panel').style.display = 'block';
    };
    reader.readAsDataURL(file);
});

const canvas = document.getElementById('image-canvas');
const ctx = canvas.getContext('2d');

// 默认值
const initialWatermarkSize = 50;  // 较大的初始水印大小
const initialSpacingHorizontal = 100; // 较大的初始水平间距
const initialSpacingVertical = 100;   // 较大的初始垂直间距
const initialRotate = 0; // 初始旋转角度

function updateCanvas() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    updateWatermark();
}



function updateWatermark() {
    const text = document.getElementById('watermark-text').value || "水印添加器"; // 默认文本
    const color = document.getElementById('watermark-color').value || "#000000";
	//const size = parseInt(document.getElementById('watermark-size').value, 10) || initialWatermarkSize;
    const sizePercentage = parseInt(document.getElementById('watermark-size').value, 10) || initialWatermarkSize;
    const opacity = parseFloat(document.getElementById('watermark-opacity').value) || 1.0;
    const position = document.getElementById('watermark-position').value || "center";
    const rotate = parseInt(document.getElementById('watermark-rotate').value, 10) || initialRotate;
    //const horizontalSpacing = parseInt(document.getElementById('watermark-spacing-horizontal').value, 10) || initialSpacingHorizontal;
    //const verticalSpacing = parseInt(document.getElementById('watermark-spacing-vertical').value, 10) || initialSpacingVertical;


    // 计算水印大小相对于图片的比例
    const size = (canvas.width / 1000) * sizePercentage; // 假设1000是基准宽度

    // 计算点阵间距的比例
    const horizontalSpacing = (canvas.width / 1000) * initialSpacingHorizontal;
    const verticalSpacing = (canvas.width / 1000) * initialSpacingVertical;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
    ctx.font = `${size}px Arial`;
    ctx.fillStyle = color;
    ctx.globalAlpha = opacity;

    // 绘制水印逻辑
    switch (position) {
        case 'tiled':
            for (let y = 0; y < canvas.height; y += verticalSpacing) {
                for (let x = 0; x < canvas.width; x += horizontalSpacing) {
                    drawWatermark(x, y, text, rotate);
                }
            }
            break;
        default:
            const { x, y } = calculatePosition(position, canvas.width, canvas.height, size, horizontalSpacing, verticalSpacing);
            drawWatermark(x, y, text, rotate);
    }

    ctx.globalAlpha = 1.0;
}

function drawWatermark(x, y, text, rotate) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(rotate * Math.PI / 10);
    ctx.fillText(text, 0, 0);
    ctx.restore();
}

function calculatePosition(position, canvasWidth, canvasHeight, size, horizontalSpacing, verticalSpacing) {
    // 计算水印的位置，考虑间距
    // 示例：左上角位置
    let x, y;
    switch (position) {
        case 'top-left':
            x = horizontalSpacing;
            y = verticalSpacing;
            break;
        // ...为其他位置添加类似的逻辑...
        default:
            x = canvasWidth / 2;
            y = canvasHeight / 2;
    }
    return { x, y };
}

document.querySelectorAll('.settings-panel input, .settings-panel select').forEach(element => {
    element.addEventListener('input', updateWatermark);
});

document.getElementById('download-button').addEventListener('click', () => {
    const link = document.createElement('a');
    link.download = 'watermarked-image.png';
    link.href = canvas.toDataURL();
    link.click();
});
